<template>
  <!-- 日志   孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松孙丽松 -->
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 记录区 -->
        <el-row class="box">
          <el-alert
            :title="`共${total}条记录`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </el-row>

        <el-row type="flex" justify="end" class="bbb">
          <el-button
            type="primary"
            @click="dialogshow = true"
            size="small"
            plain
            >新增</el-button
          >
        </el-row>

        <!-- 表格区 -->
        <el-row>
          <el-table
            :header-cell-style="{ background: '#fafafa' }"
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              prop="style"
              label="操作类型"
              width="200"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="Name"
              align="center"
              label="操作人"
              sortable
              width="500"
            >
            </el-table-column>
            <el-table-column prop="miaoshu" align="center" label="执行结果">
            </el-table-column>
            <el-table-column align="center" label="执行时间">
              <template slot-scope="{ row }">
                {{ row.time | dayjj }}
              </template>
            </el-table-column>
            <el-table-column prop="describe" align="center" label="描述">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button
                  @click="setFn(row.id)"
                  type="danger"
                  size="small "
                  icon="el-icon-delete"
                  plain
                  circle
                ></el-button>
                <el-button
                  @click="addFn(row.id)"
                  type="primary"
                  plain
                  size="small "
                  icon="el-icon-edit"
                  circle
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <!-- 分页区 -->
        <el-row type="flex" justify="end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryData.page"
            :page-sizes="[10, 15, 20]"
            :page-size="queryData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- 弹框 -->

    <el-dialog
      v-if="dialogshow"
      :title="formData.id ? '修改' : '新增'"
      :visible.sync="dialogshow"
      width="width"
      ref="form"
      @close="formData = {}"
    >
      <el-form :rules="rules" ref="form" :model="formData" label-width="80px">
        <el-form-item label="操作人" prop="Name">
          <el-input v-model="formData.Name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="操作类型" prop="style">
          <el-select v-model="formData.style" placeholder="请选操作类型">
            <el-option label="CN" value="CN"></el-option>
            <el-option label="US" value="US"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行结果" prop="describe">
          <el-input
            v-model="formData.describe"
            placeholder="请输入执行结果"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="miaoshu">
          <el-input v-model="formData.miaoshu" placeholder="请描述"></el-input>
        </el-form-item>
        <el-form-item label="执行时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="formData.time"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>

      <el-button @click="dialogshow = false">取 消</el-button>
      <el-button type="primary" @click="okBtn">确 定</el-button>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "hahah",
  data() {
    return {
      formData: {
        miaoshu: "",
        company: "",
        style: "",
        describe: "",
        Name: "",
        time: "",
      },
      dialogshow: false,
      queryData: {
        pageSize: 10,
        page: 1,
      },
      total: null,
      list: [],
      // 校验规则
      rules: {
        miaoshu: [{ required: true, message: "请输入描述", trigger: "blur" }],
        company: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        style: [{ required: true, message: "请输入类型", trigger: "blur" }],
        describe: [
          { required: true, message: "请输入执行结果", trigger: "blur" },
        ],
        Name: [{ required: true, message: "请输入执行结果", trigger: "blur" }],
      },
    };
  },
  created() {
    this.listData();
  },
  methods: {
    async listData() {
      // 数据请求
      await axios
        .post("http://sunlisongzhenshuai/api/list", this.queryData)
        .then((res) => {
          console.log(res.data.data);
          this.list = res.data.data.tableData;
          this.total = res.data.data.total;
        });
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryData.pageSize = val;
      this.listData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryData.page = val;
      this.listData();
    },
    // 删除功能
    async setFn(id) {
      // console.log(id);
      await this.$confirm("确认删除吗?");
      await axios
        .post("http://sunlisongzhenshuai/api/delete", { id: id })
        .then((res) => {
          console.log(res);
          this.$message.success("删除成功!");
          this.listData();
        });
    },
    // 修改弹框
    addFn(id) {
      this.dialogshow = true;
      this.formData.id = id;
      console.log(id);
    },
    async okBtn() {
      try {
       await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }

      if (this.formData.id) {
        await axios
          .post("http://sunlisongzhenshuai/api/update", this.formData)
          .then((res) => {
            console.log(res);
            this.$message.success("修改成功!");
            this.listData();
            this.dialogshow = false;
            this.formData = {};
          });
      } else {
        console.log("1111111111111111111");
        console.log(this.sls);
        await axios
          .post("http://sunlisongzhenshuai/api/add", this.formData)
          .then((res) => {
            console.log(res);
            this.$message.success("添加成功!");
            this.listData();
            this.dialogshow = false;
            this.formData = {};
          });
      }
    },
  },
};
</script>
<style>
.box {
  padding-bottom: 20px;
}
.bbb {
  padding-right: 100px;
  padding-bottom: 20px;
}
</style>
